<template>
  <view class="flex text-[28rpx] items-center pt-[20rpx] justify-between">
    <button
      open-type="share"
      class="share-btn flex items-center m-0"
      :data-title="props?.detailData?.title"
      :data-articleid="props?.detailData?.articleId"
      :data-id="props?.detailData?.id"
    >
      <uni-icons type="redo" size="20"></uni-icons>
      <view class="ml-1">分享</view>
    </button>
    <view class="flex w-[30%] justify-between">
      <view class="flex items-center" @click="() => clickFun(1)">
        <uni-icons
          :type="props?.detailData?.isLike ? 'heart-filled' : 'heart'"
          :color="props?.detailData?.isLike ? 'red' : '#333'"
          size="20"
        ></uni-icons>
        <view class="ml-1">{{ props?.detailData?.likeNumber || 0 }}</view>
      </view>
      <view class="flex items-center" @click="() => clickFun(2)">
        <uni-icons
          v-if="props?.detailData?.isDiscount == 1"
          custom-prefix="xlxicon"
          type="xlx-youhuiquan"
          :color="props?.detailData?.isFavorite == 1 ? 'orange' : '#333'"
          size="22"
        ></uni-icons>
        <uni-icons
          v-else
          :type="props?.detailData?.isFavorite ? 'star-filled' : 'star'"
          :color="props?.detailData?.isFavorite ? 'orange' : '#333'"
          size="22"
        ></uni-icons>
        <view class="ml-1">{{ props?.detailData?.favoriteNumber || 0 }}</view>
      </view>
      <view class="flex items-center" @click="() => clickComment(null)">
        <uni-icons type="chat" color="#333" size="20"></uni-icons>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { favorites, getLikes } from '@/service/details'
const props = defineProps<{
  detailData: any
}>()
const emits = defineEmits(['click-comment', 'get-details-fun'])
const clickComment = (e: string) => emits('click-comment', e)
const getDetailsFun = (e: string) => emits('get-details-fun', e)
const clickFun = async (type) => {
  if (type === 1) {
    await getLikes({
      articleId: props.detailData.articleId,
    })
  } else {
    await favorites({
      articleId: props.detailData.articleId,
    })
  }
  getDetailsFun(props.detailData.id)
}
</script>
<style lang="scss" scoped>
.share-btn {
  font-size: 28rpx;
  background: transparent;
}
</style>
